<template>
  <div>
    <el-button type="primary" size="small" @click="dialogVisible=true">
      新闻选择
    </el-button>
    <el-dialog
      v-if="dialogVisible"
      title="新闻选择"
      :visible.sync="dialogVisible"
      width="75%"
      :before-close="handleClose">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="待处理" name="first" v-if="$_has('/groupEdition/check')" :disabled="loading"></el-tab-pane>
        <el-tab-pane label="去提交" name="second" :disabled="loading"></el-tab-pane>
        <el-tab-pane label="去选择" name="third" :disabled="loading"></el-tab-pane>
      </el-tabs>
      <div class="cms-list-header flex-between">
        <div style="flex:auto" class="content-flex-right">
          <el-select @change="goQuery()" v-model="params.channelId" clearable placeholder="请选择">
            <el-option v-for="item in channelList" :key="item.channelId" :label="item.channelName"
                       :value="item.channelId">
            </el-option>
          </el-select>
          <cms-input label="标题" v-model="params.title"></cms-input>
          <el-button @click="goQuery()">查询</el-button>
        </div>
      </div>
      <el-table :data="tableData" stripe @selection-change="checkIds" v-loading="loading">
        <el-table-column type="selection" width="32" align="center"></el-table-column>
        <el-table-column prop="id" label="id" width="50" align="left"></el-table-column>
        <el-table-column prop="title" label="标题" align="left" min-width="100px" max-width="150px">
          <div slot-scope="scope">
            <span class="cms-channel-name">[{{scope.row.channelName}}]</span>
            {{scope.row.title}}
          </div>
        </el-table-column>
        <el-table-column label="推荐轮播排序" prop="isRecommendSlider" align="center" width="150"
                         v-if="groupEditionCode=='isRecommendSlider' && activeName== 'first'">
          <div slot-scope="scope">
            <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.recommendSliderSort"
                             :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
          </div>
        </el-table-column>
        <el-table-column label="推荐级别" prop="isRecommend" align="center" width="150"
                         v-if="(groupEditionCode=='dPIsRecommend'||groupEditionCode=='pcIsRecommend')&& activeName== 'first'">
          <div slot-scope="scope">
            <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.recommendLevel"
                             :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
          </div>
        </el-table-column>
        <el-table-column label="推荐置顶" prop="topLevel" align="center" width="150"
                         v-if="groupEditionCode=='topLevel' && activeName== 'first'">
          <div slot-scope="scope">
            <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.topLevel"
                             :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
          </div>
        </el-table-column>
        <el-table-column label="焦点" prop="alertsSort" align="center" width="150" v-if="groupEditionCode=='isAlerts' && activeName== 'first'">
          <div slot-scope="scope">
            <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.alertsSort" :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
          </div>
        </el-table-column>
        <el-table-column label="大图新闻位置" prop="bigPosition" align="center" width="150" v-if="groupEditionCode=='isBig' && activeName== 'first'">
          <div slot-scope="scope">
            <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.bigPosition" :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
          </div>
        </el-table-column>
        <el-table-column label="首页头条" prop="indexHot" align="center" width="150" v-if="(groupEditionCode=='indexHotComment'||groupEditionCode=='indexHot') && activeName== 'first'">
          <div slot-scope="scope">
            <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.indexHotPosition" :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
          </div>
        </el-table-column>
        <el-table-column label="频道轮播排序" prop="isChannelSlider" align="center" width="150"
                         v-if="groupEditionCode=='isChannelSlider' && activeName== 'first'">
          <div slot-scope="scope">
            <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.channelSliderSort"
                             :min="1" :disabled="!$_has('/groupEdition/check')"></el-input-number>
          </div>
        </el-table-column>
        <el-table-column label="频道置顶" prop="channelTopLevel" align="center" width="150"
                         v-if="groupEditionCode=='channelTopLevel' && activeName== 'first'">
          <div slot-scope="scope">
            <el-input-number style="width: 120px; line-height: 30px;" v-model="scope.row.channelTopLevel" :min="1"
                             :disabled="!$_has('/groupEdition/check')"></el-input-number>
          </div>
        </el-table-column>
        <el-table-column label="发布时间" prop="releaseDate" align="center" width="120px"></el-table-column>
        <!--操作 -->
        <el-table-column label="操作" align="center" :width="activeName=='third'?'100px':'200px'">
          <div slot-scope="scope">
            <el-button type="primary" @click="groupEditionNewOpt(api.groupEditionNewCancel,scope.row,1)"
                       v-if="activeName=='second'">取消
            </el-button>
            <el-button type="primary" @click="groupEditionNewOpt(api.groupEditionNewSub,scope.row,4)"
                       v-if="activeName=='second'">提交
            </el-button>
            <el-button type="warning" @click="groupEditionNewOpt(api.groupEditionNewBack,scope.row,2)"
                       v-if="activeName=='first'" v-perms="'/groupEdition/check'">
              退回
            </el-button>
            <el-button type="success" @click="groupEditionNewOpt(api.groupEditionNewComplete,scope.row,3)"
                       v-if="activeName=='first'" v-perms="'/groupEdition/check'">
              确定
            </el-button>
            <el-button type="primary" @click="goSelect(scope.row)" v-if="activeName=='third'">
              选择
            </el-button>
          </div>
        </el-table-column>
      </el-table>
      <!-- 表格底部 -->
      <div class="cms-list-footer" style="padding-bottom:100px;">
        <div class="cms-left">
          <el-button :disabled="disabled" @click="goSelect" v-if="activeName=='third'">
            批量选择
          </el-button>
        </div>
        <cms-pagination :total="total" @change="getPages"></cms-pagination>


      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from "axios";
  import va from "@/rules";
  import formMixns from "@/mixins/form";
  import listMixins from '@/mixins/list'

  export default {
    mixins: [formMixns, listMixins],
    props: {
      channelId: {
        type: Number,
        default: 0,
      },
      groupEditionId: {
        type: String,
        default: '',
      },
      groupEditionCode: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        params: {
          channelId: '',
          pageNo: 1,
          pageSize: 10,
          groupEditionCode: '',
          dealState: 0
        },
        channelList: [],
        dialogVisible: false,
        activeName: 'first',
        channelList: [],
        api: this.$api,
        stayTableData: []
      };
    },
    methods: {
      handleClose() {
        this.dialogVisible = false;
      },
      handleClick(tab, event) {
        let tabName = tab.name;
        this.activeName = tabName;
        this.params.pageNo = 1;
        this.params.pageSize = 10;
        this.goQuery();
      },
      getChannelList() {
        axios.post(this.$api.getOneLevelChannelList, {}).then(res => {
          if (res.code == '200') {
            this.channelList = res.body;
          }
        })
      },
      saveGroupEditionNewsDataInfo(url, params) {
        this.$confirm('是否确定提交？', '警告', {type: "error"}).then(mes => {
          axios.post(url, params).then(res => {
            if (res.code == "200") {
              this.successMessage('添加成功');
              this.initTableData(this.$api.viewNewsSelectGroupEditionPageList, this.params);
            }
          })
        }).catch(error => {
          console.log(error)
        })
      },
      goSelect(content) {
        console.log(content)
        let params = {};
        params.groupEditionId = this.groupEditionId;
        if (content) {
          params.contentId = content.id
          params.channelId = content.channelId
        }
        params.contentIds = this.ids
        this.saveGroupEditionNewsDataInfo(this.$api.groupEditionNewSave, params);
      },
      goQuery() {
        let tabName = this.activeName;
        if (tabName == 'first') {
          this.params.dealState = 1;
          this.initTableData(this.$api.groupEditionNewPageList, this.params);
        }
        if (tabName == 'second') {
          this.params.dealState = 0;
          this.initTableData(this.$api.groupEditionNewPageList, this.params);
        }
        if (tabName == 'third') {
          this.initTableData(this.$api.viewNewsSelectGroupEditionPageList, this.params);
        }
      },
      delGroupEditionNew(url, remark, groupEditionNew) {
        this.$confirm('是否确定' + remark + '？', '警告', {type: "error"}).then(mes => {
          axios.post(url, {groupEditioNewId: groupEditionNew.groupEditioNewId}).then(res => {
            console.log(res);
            if (res.code == "200") {
              this.successMessage(remark + '成功');
              this.initTableData(this.$api.groupEditionNewPageList, this.params);
            }
          });
        }).catch(error => {
          console.log(error);
        });
      },
      updateEditionNew(url, remark, groupEditionNew) {
        console.log(groupEditionNew);
        this.$confirm('是否确定' + remark + '？', '警告', {type: "error"}).then(mes => {
          axios.post(url, {
            params: JSON.stringify(groupEditionNew),
            groupEditionCode: this.groupEditionCode,
            groupEditioNewId: groupEditionNew.groupEditioNewId,
          }).then(res => {
            console.log(res);
            if (res.code == "200") {
              this.successMessage('操作成功');
              this.goQuery();
            }
          });
        }).catch(error => {
          console.log(error);
        });
      },
      completeEditionNew(url, remark, groupEditionNew) {
        groupEditionNew['contentId'] = groupEditionNew.id;
        this.$confirm('是否确定' + remark + '？', '警告', {type: "error"}).then(mes => {
          axios.post(url, {
            params: JSON.stringify(groupEditionNew),
            groupEditionCode: this.groupEditionCode,
            groupEditioNewId: groupEditionNew.groupEditioNewId,
          }).then(res => {
            console.log(res);
            if (res.code == "200") {
              this.successMessage('操作成功');
              this.initTableData(this.$api.groupEditionNewPageList, this.params);
              this.$emit("refreshData");
            }
          });
        }).catch(error => {
          console.log(error);
        });
      },
      groupEditionNewOpt(url, groupEditionNew, type) {
        let remark = '';
        if (type == 1) {
          remark = '取消'
          this.delGroupEditionNew(url, remark, groupEditionNew);
        }
        if (type == 2) {
          remark = '退回'
          this.delGroupEditionNew(url, remark, groupEditionNew);
        }
        if (type == 3) {
          remark = '完成'
          this.completeEditionNew(url, remark, groupEditionNew);
        }
        if (type == 4) {
          remark = '提交'
          this.updateEditionNew(url, remark, groupEditionNew);
        }
      },
    },
    mounted() {
      this.getChannelList();
      this.params.groupEditionCode = this.groupEditionCode;
      let isCheck = this.$_has('/groupEdition/check');
      if (isCheck) {
        this.params.dealState = 1;
      } else {
        this.params.dealState = 0;
        this.activeName = "second";
      }
      this.initTableData(this.$api.groupEditionNewPageList, this.params);
    }
  };
</script>

<style scoped>

</style>
